<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 组合式API的组件，使用ref 需要使用变量 通过 ref函数生成 -->
      <my-com ref="child"></my-com>
    </div>
  </body>
  <template id="com">
    <div>
      <h1>小程</h1>
    </div>
  </template>

  <script src="../lib/vue.global.js"></script>
  <script>
    const { createApp, ref, onMounted } = Vue;
    const Com = {
      template: "#com",
      setup(props, context) {
        const a = ref(1);
        const b = ref(2);
        const c = ref(3);
        const fn = () => {
          this.a = 100;
        };
        context.expose({
          a,
          b,
          fn,
        });
        return {};
      },
    };

    Vue.createApp({
      components: {
        MyCom: Com,
      },
      setup() {
        const child = ref();
        onMounted(() => {
          console.log("child", child.value);
        });
        return {
          child,
        };
      },
    }).mount("#app");
  </script>
</html>
